<template>
    <div id='point-configuration'>
        <loading mode="full" v-if="loading"></loading>
        <el-tabs v-model="activeName">
           <el-tab-pane label="需求定价" name="1">
                <h1 class="card-title">
                    <span>需求定价(300等于3块钱等于3点券 都是以分为单位)</span>
                    <div class="card-title__button"></div>
                </h1>
                <table  width="100%">
               
                  <tbody class='table-list__body have-border'>
                      <tr v-for='item in resultNeed'>
                          <td>
                              <span>开始芝麻分</span>
                              <input type='tel' placeholder="开始芝麻分" v-model="item.startScore" class='colorChange'></input>                                         
                         </td>
                         <td>
                              <span>结束芝麻分</span>
                              <input type='tel' placeholder="结束芝麻分" v-model="item.endScore" class='colorChange'></input>                                         
                         </td>
                          <td>
                              <span>价格为</span>
                              <input type='tel' placeholder="点券价格" v-model="item.scorePrice" class='colorChange'></input>         
                              <span>点券</span>
                         </td>   
                      </tr>    
                      <tr v-if='showhead' v-for='item in byMouse'>
                                <td>
                                <span>开始芝麻分</span>
                                <input type='tel' placeholder="开始芝麻分" v-model="item.startScore" class='colorChange'></input>                                         
                                </td>
                                <td>
                                    <span>结束芝麻分</span>
                                    <input type='tel' placeholder="结束芝麻分" v-model="item.endScore" class='colorChange'></input>                                         
                                </td>
                                <td>
                                    <span>价格为</span>
                                    <input type='tel' placeholder="点券价格" v-model="item.scorePrice" class='colorChange'></input>         
                                    <span>点券</span>
                                </td>        
                      </tr>
                  </tbody>          
               </table>
               <!-- +新增一个规则 -->
               <div class='xinzen' @click='xinzeng'>+新增一个规则</div>
               <div class='xinzen' @click='demandPricesave'>保存</div>
               <!-- <div style='height:1000px;'></div> -->

            </el-tab-pane>
            <el-tab-pane label="信用报告" name="2">
                <h1 class="card-title">
                    <span>信用报告(300等于3块钱等于3点券 都是以分为单位)</span>
                    <div class="card-title__button"></div>
                </h1>
                <div class='xinyongbao'>
                    <span>信用报告收费</span>
                    <input type='tel' placeholder="信用报告收费" class='colorChange' v-model="creditReportfindItem"></input>    
                </div>
                <div class='xinzen' @click='tijiaoadmin()' >提交</div>
            </el-tab-pane>
            <el-tab-pane label="点卷配置" name="3">
                <h1 class="card-title">
                    <span>点券配置(300等于3块钱等于3点券 都是以分为单位)</span>
                    <div class="card-title__button"></div>
                </h1>
                <table  width="100%">
               
                  <tbody class='table-list__body have-border'>
                      <tr v-for='item in newAction'>
                          <td>
                              <span>点券数量配置</span>
                              <input type='tel' placeholder="点券数量" v-model="item.score" class='colorChange'></input>                                         
                         </td>
                         <td>
                              <span>点券价格</span>
                              <input type='tel' placeholder="点券价格" v-model="item.money" class='colorChange'></input>                                         
                         </td>
                          <td>
                            <el-switch
                                v-model="item.defaultChoice"
                                on-color="black"
                                off-color="#ddd"
                                :on-value="1"
                                :off-value="0">
                            </el-switch>
                            <span>设置默认</span> 
                         </td>   
                      </tr>    
                  </tbody>          
               </table>
                <textarea name="" id="" cols="30" rows="10"  placeholder="点券充值页文案" class='point-align' v-model="newAction1.scoreRechargePromptInfo"></textarea>
                <div class='xinzen'  @click='addScoreConfig()'>提交</div>
                <!-- <el-button type="primary">提交</el-button> -->
            </el-tab-pane>
        </el-tabs>
        
         

     
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import datePicker from '../components/DatePicker.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import toYuan from '../filters/filter-toYuan'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, lenderApi } from '../api/api'
    import moment from 'moment'
    import echarts from 'echarts'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'


    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            datePicker,
            tabBox,
            tab
        },
        filters:{
            dateFormat,
            toYuan,
            booleanToStr(boolean){
                if(boolean === true){
                    return '是'
                }
                else{
                    return '否'
                }
            }
        },
        data() {
            return {
                // radio:'1',
                isShow:'',
                newAction:'',
                newAction1:'',
                text:'',
                loading:true,
                activeName: '1',
                resultNeed:[],
                showhead:false,
                byMouse:[],
                kara:'',
                creditReportfindItem:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
             dianquancount(){
               let records =  _.filter(this.newAction,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                _.each(records,(va,index)=>{
                    k.push(va.score)
                })
                return k.join()
            },
            dianquanmoney(){
                let records =  _.filter(this.newAction,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                _.each(records,(va,index)=>{
                    k.push(va.money)
                })
                return k.join()
            },
            shezhimoren(){
                let records =  _.filter(this.newAction,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                _.each(records,(va,index)=>{
                    k.push(va.defaultChoice)
                })
                return k.join()
            },
            number(){
                let records =  _.filter(this.resultNeed,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                return Number(records.length)  
            },
            one(){
                let records =  _.filter(this.resultNeed,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let records2 =  _.filter(this.byMouse,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                 _.each(records,(va,index)=>{
                    k.push(va.startScore)
                })
                let p=[]
                 _.each(records2,(va,index)=>{
                    p.push(va.startScore)
                })
                return k.join()+','+p.join()
            },
            two(){
                let records =  _.filter(this.resultNeed,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let records2 =  _.filter(this.byMouse,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                 _.each(records,(va,index)=>{
                    k.push(va.endScore)
                })
                let p=[]
                 _.each(records2,(va,index)=>{
                    p.push(va.endScore)
                })
                return k.join()+','+p.join()
            },
             three(){
                let records =  _.filter(this.resultNeed,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let records2 =  _.filter(this.byMouse,(value,index)=>{
                      return value!==undefined&&value!==null
                     })
                let k=[]
                 _.each(records,(va,index)=>{
                    k.push(va.scorePrice)
                })
                let p=[]
                 _.each(records2,(va,index)=>{
                    p.push(va.scorePrice)
                })
                return k.join()+','+p.join()
            }
           
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),
            xinzeng(){
                // alert(222)
                this.showhead=true
                if(this.number>=20){
                    alert('超过20条')
                    return
                }else{
                    // console.log(typeof(this.number))
                    this.kara=this.number
                    this.kara+=Number(this.byMouse.length)
                    //  console.log(this.kara)
                    if(this.kara>=20){
                        alert('超过20条')
                        return
                    }else{
                        this.byMouse.push({createTime:'',enable:1,endScore:'',id:1,scorePrice:'',startScore:''})
                    }                  
                }
                
                
            },
            // filters
            timestampToDate(timestamp){
                if(!timestamp) return this.placeholder
                return moment(timestamp).format('YYYY-MM-DD')
            },
            // function
             findAllScoreConfig(num){
                 this.loading=true
                allApi.findAllScoreConfig(
                    {}
                )
                .then(result => {
                    console.log('111')
                    this.newAction=result[0]
                    this.newAction1=result[1]
                    console.log(result)
                    this.loading=false
                })
                .catch(error => {
                    console.error(error)
                    this.loading=false
                })
            }, 
              addScoreConfig(){
                // let index=0;
                let params = {
                    score:this.dianquancount,
                    money:this.dianquanmoney,
                    text:this.newAction1.scoreRechargePromptInfo,
                    defaultChoice:this.shezhimoren
                }
                allApi.addScoreConfig(params)
                .then(result => {
                    console.log('111')
                    this.setMsgTip({
                        text: '已提交',
                        type: 'success'
                    })
                    this.findAllScoreConfig()
                    
                })
                .catch(error => {
                    console.error(error)
                   
                })
            },
            // demandPrice/findAll
            // demandPricefindAll
          demandPricefindAll(){
                // let index=0;
                let params = {
                }
                allApi.demandPricefindAll(params)
                .then(result => {
                    console.log(result)   
                    this.resultNeed = result        
                })
                .catch(error => {
                    console.error(error)
                })
            },
           demandPricesave(){
               let params = {
                   zmScoreStart:this.one,
                   zmScoreEnd:this.two,
                   price:this.three
                }
                allApi.demandPricesave(params)
                .then(result => {
                    console.log(result)    
                    alert('成功')    
                })
                .catch(error => {
                    console.error(error)
                })
           },
           creditReportfind(){
               allApi.creditReportfind()
                .then(result => {
                    console.log(result)
                    this.creditReportfindItem=result      
                })
                .catch(error => {
                    console.error(error)
                })
           },
           tijiaoadmin(){
            //    console.log(222)
            // creditReportupdate
            let params ={
                price:this.creditReportfindItem
            }
            allApi.creditReportupdate(params)
                .then(result => {
                    console.log(result)
                    alert(111)
                })
                .catch(error => {
                    console.error(error)
                })
           }
        },
        created(){
           this.findAllScoreConfig()
           this.demandPricefindAll()
           this.creditReportfind()
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #point-configuration{
        .xinyongbao{
            margin:18px 0;
            padding: 0 0 19px 0;
            border: 1px solid #ddd;
            border-left-color: transparent;
            border-top-color: transparent;
            border-right-color: transparent;
        }
        input::-ms-input-placeholder{text-align: center;}
        input::-webkit-input-placeholder{text-align: center}
        .el-tabs__nav {
            position: relative;
            transition: transform .3s;
            float: none; 
            width: 222px;
            margin: 0 auto;
        }
        .el-tabs {
            margin: 39px 0px -22px 0px;
        }
        .el-tabs__item.is-active {
            color: #00b1b3;
        }
        .el-tabs__active-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background-color: #13ce66!important;
            z-index: 1;
            transition: transform .3s cubic-bezier(.645,.045,.355,1);
            list-style: none;
        }
        .colorChange{
            border:1px solid #ddd;
            border-radius: 4px;
        }
        .colorChange:hover{
            border:1px solid #00b1b3;
        }
        .el-button--primary{
               
            background-color: #00b1b3;
            border-color: #00b1b3;
        }
        .point-align{
              border:1px solid $sectionColor;
              padding:10px;
              margin-bottom: 10px;
              width:100%;
        }
        .xinzen{
            width: 130px;
            height: 30px;
            background: #00b1b3;
            border-radius: 3px;
            line-height: 30px;
            text-align: center;
            color: #fff;
            margin: 10px 0 0 0;
            cursor: pointer;
        }
       
    }
</style>
